import React,{Component} from 'react'
import {connect} from 'dva'
import {List, InputItem,Radio, WingBlank, WhiteSpace, Button} from 'antd-mobile'
import 'antd-mobile/dist/antd-mobile.css'
import {Toast} from 'antd-mobile'
import imgsrc from '../../static/images/touxiang.jpeg'
import {Redirect} from 'dva/router'

class Register extends Component{
	constructor(){
		super();
		this.state = {
			type:"",
			username:'',
			password:'',
			repeatPassword:''
		}
	}
	onChange = (value) => {
		console.log('checkbox');
		this.setState({
		  type:value,
		});
	  };
	  handleChange(key,value){
		this.setState({
			[key]:value,
		})
	  }
	  register(){
		  var payload = this.state;
		  //console.log(payload);
		  if(payload.password === payload.repeatPassword){
			this.props.dispatch({type:'user/register',payload:payload});
		  }else{
			Toast.info('密码不一致',2);
		  }
	  }
    render(){
		const RadioItem = Radio.RadioItem
		
		const data = [
			{ value: 'boss', label: 'boss' },
			{ value: 'genius', label: 'genius' },
		  ];
        return(
            <React.Fragment>
							  {this.props.redirectPath? <Redirect to={this.props.redirectPath} />:null}
                <img src={imgsrc} style={{width:'60px',height:'60px',margin:'35px auto',border:'1px solid #777',borderRadius:'50%',display:'block'}}></img>
                <List>
					{/* {this.props.msg?<p className='error-msg'>{this.props.msg}</p>:null} */}
					<InputItem onChange={(v)=>{this.handleChange('username',v)}}>用户名</InputItem>
					<WhiteSpace />
					<InputItem
						type='password'
						onChange={(v)=>{this.handleChange('password',v)}}
					>密码</InputItem>
					<WhiteSpace />
					<InputItem
						type='password'
						onChange={(v)=>{this.handleChange('repeatPassword',v)}}
					>确认密码</InputItem>
					<WhiteSpace />
					{data.map(i => (
						<RadioItem key={i.value} checked={this.state.type === i.value} onChange={() => this.onChange(i.value)}>
							{i.label}
						</RadioItem>
					))}
					<WhiteSpace />
					<Button type='primary' onClick={()=>{this.register()}}>注册 </Button>
				</List>
            </React.Fragment>
        )
    }
}
const mapStateProps = (state)=>{
    return{
			redirectPath:state.user.redirectPath,
    }
}
export default connect(mapStateProps)(Register);